<template>
	<view class="box">
		<view class="return" @click="onClickLeft">
			<van-icon name="arrow-left" />
		</view>
		<view class="content">
			<!-- 介绍 -->
			<view class="introduce">
				<view class="introduce-item">
					促销活动时间：2023年6月22日-24日
				</view>
				<view class="introduce-item">
					进店消费即可领取粽子一份 / 满388送端午节玩具一个
				</view>
			</view>
			<!-- 商品 -->
			<view class="goods">
				<view class="goods-item" @click="goGoodsDetails(item.id, item.goods_id)" v-for="item in goodsList"
					:key="item">
					<image :src="item.goods_img" mode=""></image>
					<view class="goods-info">
						<view class="name">{{item.goods_name}}</view>
						<view class="style">{{item.goods_styles[0]}}</view>
						<view class="price">限时促销 <span>￥{{item.goods_price}}</span></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				goodsList: [],
			}
		},
		methods: {
			onClickLeft() {
				history.back();
			},
			// 跳转商品详情页
			goGoodsDetails(id, goodsId) {
				uni.navigateTo({
					url: `/pages/goods/goods_details/goods_details?id=${id}&goods_id=${goodsId}`
				})
			}
		},
		onLoad(option) {
			api.getCateGoods(option.nav_id, {
				page: 1,
				limit: 10,
			}).then(res => {
				this.goodsList = res.data.data.list;
			})
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100vh;
		background-image: url(/static/zongzi-bg1.jpg);
		background-size: 100% 100vh;
		background-repeat: no-repeat;
	}

	.return {
		position: relative;
		top: 10px;
		left: 10px;
		width: 22px;
		height: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid #505050;
	}

	.content {
		margin: 550rpx auto;
		width: 80%;
		height: 300px;
	}

	.introduce {
		width: 100%;
		height: 150rpx;
		background-color: #F9F1DD;
		border-radius: 7px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.introduce-item {
		width: 95%;
		height: 50rpx;
		background-color: #005A59;
		border-radius: 5px;
		text-align: left;
		line-height: 50rpx;
		font-size: 11px;
		color: #fff;
		padding-left: 10px;
	}

	.goods {
		margin-top: 10px;
		width: 100%;
		background-color: #F9F1DD;
		border-radius: 5px;
		padding: 10px;
	}

	.goods-item {
		width: 95%;
		height: 80px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods-item image {
		width: 70px;
		height: 70px;
	}

	.goods-info {
		width: 190px;
	}

	.goods-info .name {
		color: #005A59;
		font-size: 20px;
		font-weight: 800;
	}

	.goods-info .style {
		color: #005A59;
		font-size: 13px;
	}

	.goods-info .price {
		color: rgb(253, 80, 47);
		font-size: 13px;
	}

	.goods-info .price span {
		font-size: 17px;
	}
</style>